import './index.scss'
import avatar from './images/bozai.png'
import user_avatar from './assets/react.svg'
import { useRef, useState } from 'react'


/**
 * 评论列表的渲染和操作
 *
 * 1. 根据状态渲染评论列表
 * 2. 删除评论
 */



// 评论列表数据
const defaultList = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: '13258165',
      avatar: '',
      uname: '周杰伦',
    },
    // 评论内容
    content: '哎哟，不错哦',
    // 评论时间
    ctime: '10-18 08:15',
    like: 88,
  },
  {
    rpid: 2,
    user: {
      uid: '36080105',
      avatar: '',
      uname: '许嵩',
    },
    content: '我寻你千百度 日出到迟暮',
    ctime: '11-13 11:29',
    like: 88,
  },
  {
    rpid: 1,
    user: {
      uid: '30009257',
      avatar,
      uname: '黑马前端',
    },
    content: '学前端就来黑马',
    ctime: '10-19 09:00',
    like: 66,
  },
]
// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  avatar,
  // 用户昵称
  uname: '黑马前端',
}



/**
 * 导航 Tab 的渲染和操作
 *
 * 1. 渲染导航 Tab 和高亮
 * 2. 评论列表排序
 *  最热 => 喜欢数量降序
 *  最新 => 创建时间降序
 */

// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热', light: true },
  { type: 'time', text: '最新', light: false },
]

// 定义 Item 组件的 Props 类型
interface ItemProps {
  item: {
    rpid: number;
    user: {
      uid: string;
      avatar: string;
      uname: string;
    };
    content: string;
    ctime: string;
    like: number;
  };
  clickDelete: (rpid: number) => void;
}

// 封装 评论列表中的 Item 组件
function Item({ item, clickDelete }: ItemProps) {
  return (<div className="reply-item">
    {/* 头像 */}
    <div className="root-reply-avatar">
      <div className="bili-avatar">
        <img
          className="bili-avatar-img"
          alt=""
          src={user_avatar}
        />
      </div>
    </div>

    <div className="content-wrap">
      {/* 用户名 */}
      <div className="user-info">
        <div className="user-name">{item.user.uname}</div>
      </div>
      {/* 评论内容 */}
      <div className="root-reply">
        <span className="reply-content">{item.content}</span>
        <div className="reply-info">
          {/* 评论时间 */}
          <span className="reply-time">{item.ctime}</span>
          {/* 评论数量 */}
          <span className="reply-time">点赞数:{item.like}</span>
          {/* 删除按钮 只有自己的评论才能删除 */}
          {item.user.uid === user.uid && (
            <span className="delete-btn" onClick={() => clickDelete(item.rpid)}>
              删除
            </span>)}

        </div>
      </div>
    </div>
  </div>)
}

const App = () => {

  const [commentList, setCommentList] = useState(defaultList)

  // 默认 hot显示高亮
  const [type, setType] = useState('hot')

  // 评论内容
  const [content, setContnet] = useState('')

  // 获取文本框的DOM元素
  const inputRef = useRef<HTMLTextAreaElement | null>(null);



  // '10-19 09:00' 转时间戳
  const chnage_ctime = (item: string) => {
    const arr = item.split(' ')
    const [month, day] = arr[0].split('-')
    return new Date(`${month}/${day}`).getTime()
  }
  const handleClick = (types: string) => {
    console.log(types)
    // 点击 高亮显示 
    // 方法: 声明一个标志性变量  每次点击拿到type.text的值，最后通过类名遍历 看类名和点击的类名是否一致
    setType(types)

    // 评论列表排序
    if (types === 'hot') {
      // 最热 => 喜欢数量降序
      const newList = [...commentList].sort((a, b) => b.like - a.like)
      setCommentList(newList)
    } else if (types === 'time') {
      // 最新 => 创建时间降序
      const newList = [...commentList].sort((a, b) => chnage_ctime(a.ctime) - chnage_ctime(b.ctime))
      setCommentList(newList)
    }
  }

  const clickDelete = (rpid: number) => {
    // 删除评论
    const newList = commentList.filter(item => item.rpid !== rpid)
    setCommentList(newList)
  }

  // 格式化 时间函数
  const getCurrentTimeFormatted = () => {
    const now = new Date();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    return `${month}-${day} ${hours}:${minutes}`;
  }

  // 发布 评论
  const sendClick = () => {
    // 评论内容 正则 去除空格
    if (!content.trim()) {
      return alert('评论内容不能为空')
    }
    else {
      setCommentList([{
        rpid: commentList.length + 1,
        user: {
          uid: user.uid,
          avatar: user.avatar,
          uname: user.uname,
        },
        content: content,
        ctime: getCurrentTimeFormatted(),
        // 生成 0 ~ 100 的随机数
        like: Math.floor(Math.random() * 100),
      }, ...commentList])
    }
    // 发布完成 清空输入框
    setContnet('')
    // 重新 聚焦
    if (inputRef.current) inputRef.current.focus()
  }





  return (
    <div className="app">
      {/* 导航 Tab */}
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            {/* 评论数量 */}
            <span className="total-reply">{defaultList.length}</span>
          </li>
          <li className="nav-sort">
            {/* 高亮类名： active */}
            {/* <span className='nav-item'>最新</span>
            <span className='nav-item'>最热</span> */}
            {tabs.map(item => <span key={item.type} onClick={() => handleClick(item.type)} className={item.type === type ? 'nav-item active' : 'nav-item'}>{item.text}{item.text}</span>)}
          </li>
        </ul>
      </div>

      <div className="reply-wrap">
        {/* 发表评论 */}
        <div className="box-normal">
          {/* 当前用户头像 */}
          <div className="reply-box-avatar">
            <div className="bili-avatar">
              <img className="bili-avatar-img" src={user.avatar} alt="用户头像" />
            </div>
          </div>
          <div className="reply-box-wrap">
            {/* 评论框 */}
            <textarea
              ref={inputRef}
              value={content}
              onChange={e => setContnet(e.target.value)}
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
            />
            {/* 发布按钮 */}
            <div className="reply-box-send" onClick={() => sendClick()}>
              <div className="send-text">发布</div>
            </div>
          </div>
        </div>



        {/* 评论列表 */}
        <div className="reply-list">
          {/* 评论项 */}
          {/* 不要忘记 写 key */}
          {commentList.map((item) => <Item key={item.rpid} item={item} clickDelete={clickDelete} />)}
        </div>
      </div>
    </div>
  )
}

export default App